<template>
  <div id="pszl_bar" :style="{ width: '100%', height: '250px' }"></div>
</template>
<script>
import echarts from 'echarts'
// var yAxisData = ['视频图像块效应明显', '视频信号丢失黑屏', '视频图像冻结', '摄像头被遮挡', '图像虚焦']
// var dataAll = [582, 259, 262, 324, 232, 176]
let echartData = {}
export default {
  name: 'pszl_bar',
  props: ['barData'],
  data() {
    return {}
  },
  mounted() {
    echartData = this.barData
    var myChart = echarts.init(document.getElementById('pszl_bar'))
    const option = {
      color: ['#F56C6C'],
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: 'none', // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      title: { text: '异常分类', top: 0, left: 0, textStyle: { color: '#2F3033', fontSize: '16' } },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true,
      },
      xAxis: [
        {
          type: 'category',
          data: echartData.yAxisData,
          axisTick: {
            show: false,
            alignWithLabel: false,
          },
          axisLine: {
            show: false,
          },
        },
      ],
      yAxis: [
        {
          type: 'value',
          axisTick: {
            show: false,
          },
          axisLabel: {
            textStyle: {
              color: '#999',
            },
            formatter: function (value) {
              return value + ' 台'
            },
          },
          axisLine: {
            show: false,
          },
          splitLine: {
            lineStyle: {
              color: '#F1F3F5',
              type: 'solid',
            },
          },
        },
      ],
      series: [
        {
          name: '数量',
          type: 'bar',
          barWidth: '13%',
          label: {
            show: true,
            position: 'top',
            distance: 0,
            color: '#333',
            fontWeight: 'none',
            fontSize: 13,
            z: 100,
          },
          data: echartData.dataAll,
        },
      ],
    }
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      //   让我们图表调用resize方法
      myChart.resize()
    })
  },
}
</script>
<style lang="scss"></style>
